{% extends 'header.html' %}
{% block title  %}
	登录
{% endblock %}
{% block js %}
    <script src="{% static 'js/register.js' %}"></script>
    <script>
    window.onload = function (){
        $('#login').click(function (){
            let prompt = $('#prompt')
            $.ajax({
                url:'{% url 'userAuth:loginApi' %}',
                type:'post',
                headers:{
                    "X-CSRFToken": "{{ csrf_token }}"
                },
                dataType:'json',
                data:{
                    'account':$('#InputAccount').val(),
                    'password':$('#InputPassword').val(),
                    'checked':$('#Check').is(':checked')
                },
                success:function (response){
                    if(response.code === 200){
                        window.location.href = '{% url 'blog:index' %}'
                    }else{
                        delayed(prompt,response.msg,3000)
                    }
                },
                error:function (){
                    delayed(prompt,'客户端求情错误请重试',3000)
                }
            })
        })
    }
    </script>
{% endblock %}
{% block main %}
	<div style="max-width: 400px" class="container-sm m-auto my-5">
        <h1 class="mb-5">请登录</h1>
        <form action="" method="post">
            {% csrf_token %}
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">账号</label>
            <input type="text" class="form-control" id="InputAccount" aria-describedby="emailHelp">
          </div>
          <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">密码</label>
            <input type="password" class="form-control" id="InputPassword">
              <span class="text-secondary" id="prompt"></span>
          </div>
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="Check">
            <label class="form-check-label" for="exampleCheck1">记住我</label>
          </div>
          <div class="mb-3 mt-4">
              <button type="button" id="login" class="btn btn-primary w-100">登录</button>
          </div>
        </form>
    </div>
{% endblock %}